<template>
  <div ref="refIndexList" class="index-list-wrap">
    <div v-for="(item,index) in indexlist" :key="index" class="item-wrap">
      <IndexItem :item="item" :index="index" :num="computedNum(index,indexlist)" @activeItemChange="activeItemChange"></IndexItem>

      <IndexDetail
        v-if="item.isShow"
        class="index-content"
        :index="index"
        :detail="item.detail"
        :quota="item"
        :threshold="item.threshold"
        @Favrefresh="Favrefresh($event, item)"></IndexDetail>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import HomeServe from '@/api/home'
import IndexDetail from "./IndexDetail.vue"
import IndexItem from "./IndexItem.vue"

defineOptions({
  name: 'IndexList'
})


const emit = defineEmits([])

const router = useRouter()

//查询推荐指标
const indexlist = ref<RecordType[]>([])
const getQuotasList = () => {
  HomeServe.getQuotasList().then(res => {
    indexlist.value = res.data;
  })
}

const activeIndex = ref(null)
const activeItemChange = async (item: any,index: number) =>{
  item.id = item.quotaId
  if (!item.isShow) {
    const resp = await HomeServe.getRightDetailsByTypeId({
      typeId: item.quotaId
    })
    item.detail = resp.data
  } else {
    item.detail = null
  }
  
  if(activeIndex.value != index){
    indexlist.value.forEach(ele=>{
      ele.isShow = false;
    })
  }
  item.isShow = !item.isShow;
  activeIndex.value = index;
}

getQuotasList();

const Favrefresh = (ev: any, item: any) => {
  item.collectFlag = ev
}

const computedNum = (index: number, list: any) => {
  let len = list.length;
  //计算列表是否是单数，如果是单数则最后一条独自占据一行
  if((len%2!=0) && ((index+1)==len)){
    return 1
  }else{
    return 2
  }
}
</script>

<style lang="less" scoped>
.index-list-wrap {
  border-radius: 4px;
  background: rgba(255,255,255,0.9);
  margin: 12.5px 12px;
  padding: 10px 10px 2px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.03);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item-wrap{
    width: 159px;
    margin-bottom: 10px;
    &:nth-child(even){
      .index-content{
        left: -170px;
      }
    }
  }
}
</style>
